<template>
  <a-modal title="流程图" :visible.sync="dialogProcessImageVisibleInChild" @cancel="handleCancel" :footer="null" :bodyStyle="bodyStyle" width="60%">
    <div style="width: 800px"><img :src="imagePath" alt="流程图"></div>
  </a-modal>
</template>

<script>
  import Vue from 'vue'

  export default {
    name: 'ProcessImage',
    props: {
      visible: {
        type: Boolean,
        default: function() {
          return false
        }
      },
      processDefinitionId: {
        type: String,
        default: function() {
          return ''
        }
      },
      processInstanceId: {
        type: String,
        default: function() {
          return ''
        }
      }
    },
    computed: {
      dialogProcessImageVisibleInChild: {
        get() {
          return this.visible
        },
        set(val) {
          this.$emit('update:visible', val)
        }
      }
    },
    data() {
      return {
        bodyStyle: {
          height: '400px'
        },
        imagePath: ''
      }
    },
    created() {
      this.init()
    },
    methods: {
      handleCancel() {
        this.dialogProcessImageVisibleInChild = false
      },
      init() {
        let url = ''
        const token = Vue.ls.get('Access-Token')
        let params = {}
        if (this.processInstanceId && this.processInstanceId != null && this.processInstanceId !== '') {
          params.processInstanceId = this.processInstanceId
          url = '/base/bpm/processInstance/processInstanceImage'
        } else if (this.processDefinitionId && this.processDefinitionId != null && this.processDefinitionId !== '') {
          params.processDefinitionId = this.processDefinitionId
          url = '/base/bpm/processDefinition/image'
        }
        this.axios({
          method: 'get',
          url: url,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            Authorization: token
          },
          params: params
        }).then(function(response) {  // 将后台的图片二进制流传华为base64
          return 'data:image/png;base64,' + response.data
        }).then(data => {
          this.imagePath = data // data即为图片地址
        })
      }
    }
  }
</script>
<style scoped lang="scss">


</style>

